import React from 'react'
import style from './selectableItem.scss'
import classnames from 'classnames'
import { mergeStyle } from './mergeStyle'

export const SelectedableItem = ({ item, children, active, onSelect, preview }) => {
    const onSelectItem = React.useCallback(() => onSelect(item), [item])

    return (
        <div className={mergeStyle(style, 'selectable_item', classnames({ active, preview }))}
            onClick={onSelectItem} title={typeof children === 'string' ? children : ''}>
            {children}
        </div>
    )
}